<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <div class="login-left">
        <!-- <div class="title">高效记录生活</div>
        <div class="sub">轻松收集，有效整理</div>
        <img src="@/assets/login.png" alt="" /> -->
        <el-card
          v-for="(item, index) in menuList"
          :key="index"
          shadow="never"
          class="menu-card"
        >
          <template #header>
            <el-row align="middle">
              <el-icon style="margin-right: 5px" size="20">
                <component
                  :is="
                    item.icon == '#'
                      ? icons[item.name]
                      : item.icon || icons[item.name]
                  "
                ></component>
              </el-icon>
              {{ item.name }}
            </el-row>
          </template>
          <el-row class="menu-icons" align="middle">
            <el-button
              type="primary"
              text
              class="menu-btns"
              v-for="(subItem, index) in item.children"
              :key="index"
              @click="onClickPath(subItem)"
            >
              <div class="btn-icons">
                <el-icon size="20">
                  <component
                    :is="subItem.icon == '#' ? 'Menu' : subItem.icon"
                  ></component>
                </el-icon>
              </div>
              {{ subItem.name }}
            </el-button>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import store from "@/store/index.js";
const permissionInfo = store.getters.permissionInfo;
const router = useRouter();
const menuList = computed(() => permissionInfo.menus);
const onClickPath = (item) => {
  router.push(item.path);
};
const icons = {
  用户管理: "Avatar",
  标签条管理: "Management",
  报表管理: "TrendCharts",
};
</script>
<style scoped lang="scss">
.login-container {
  width: 100%;
  height: calc(100vh - 120px);
  background-image: url("@/assets/bg.png");
  background-size: 100% 100%;
  // display: flex;
  // align-items: center;
  // justify-content: center;

  .login-box {
    width: 96%;
    height: 94%;
    // background-color: hsla(0, 0%, 100%, 0.85);
    border-radius: 10px;
    padding: 5% 50px 0 50px;
    box-sizing: border-box;
    // display: flex;
    // align-items: center;
    // justify-content: space-around;

    .menu-card {
      border: none;
      margin-top: 10px;
    }
    .menu-icons {
      width: max-content;
      justify-content: center;
      text-align: center;
    }
    .menu-btns {
      height: fit-content;
    }
    // .login-left {
    //   width: 800px;
    //   color: #6e736fff;

    //   .title {
    //     font-size: 48px;
    //     font-weight: 400;
    //     letter-spacing: 0px;
    //     color: rgba(47, 57, 78, 1);
    //     text-align: left;
    //   }

    //   img {
    //     width: 735px;
    //     height: 465px;
    //   }
    // }
    .btn-icons {
      color: #333;
      margin-bottom: 8px;
    }
    :deep(.el-button > span) {
      display: block;
    }
  }
}
</style>
